<template>
  <div v-if="useuserStore.userInfo.userName === 'zh'" class="app-container">
    <n-card :bordered="false" :content-style="{ padding: '12px' }">
      <div class="form">
        <n-form ref="formRef" inline :label-width="80" :model="formValue">
          <n-form-item label="姓名" path="user.realName">
            <n-input v-model:value="formValue.user.realName" placeholder="姓名" />
          </n-form-item>
          <n-form-item label="电话号码" path="user.phone">
            <n-input v-model:value="formValue.user.phone" placeholder="电话号码" />
          </n-form-item>
          <n-form-item label="年级(一年级---高三)" path="user.userLevel">
            <n-select
              v-model:value="formValue.user.userLevel"
              :options="generalOptions"
              placeholder=""
            />
          </n-form-item>
          <n-form-item>
            <n-button @click="handleValidateClick">查询</n-button>
          </n-form-item>
          <n-form-item>
            <n-button @click="open">新增用户</n-button>
          </n-form-item>
          <n-drawer v-model:show="showOuter" :width="502">
            <n-drawer-content title="请填写用户信息">
              <n-form-item style="height: 50px">
                <n-input v-model:value="user.userName" type="text" placeholder="用户名" />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-input
                  v-model:value="user.password"
                  type="password"
                  show-password-on="mousedown"
                  placeholder="密码"
                  :maxlength="8"
                />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-input v-model:value="user.realName" type="text" placeholder="真实姓名" />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-input-number v-model:value="user.age" :min="1" placeholder="年龄" />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-radio-group v-model:value="user.sex" name="radiogroup">
                  <n-space>
                    <n-radio v-for="s in gender" :key="s.value" :value="s.value">
                      {{ s.label }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-date-picker v-model:value="user.birthDay" type="date" placeholder="出生日期" />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-select
                  v-model:value="user.userLevel"
                  :options="generalOptions"
                  placeholder="年级"
                />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-input v-model:value="user.phone" placeholder="电话号码" />
              </n-form-item>
              <n-form-item style="height: 50px">
                <n-button class="btn" size="large" @click="addUser">提交</n-button>
              </n-form-item>
            </n-drawer-content>
          </n-drawer>
        </n-form>
      </div>
      <div class="table">
        <NDataTable
          :columns="columns"
          :data="tableData"
          :single-line="false"
          :pagination="pagination"
        ></NDataTable>
      </div>
    </n-card>
  </div>
  <span v-else class="h-[200px] w-full flex justify-center mt-20 text-2xl font-bold"
    >非管理员，无权查看</span
  >
</template>
<script setup lang="ts">
  import { ref, h, onMounted, reactive } from 'vue'
  import type { DataTableProps } from 'naive-ui/lib/data-table'
  import {
    NDataTable,
    NTag,
    NForm,
    NFormItem,
    NInput,
    NAvatar,
    NButton,
    useMessage,
    NSelect,
    NDrawer,
    NDrawerContent,
    NInputNumber,
    NSpace,
    NRadio,
    NRadioGroup,
    NDatePicker
  } from 'naive-ui'
  import userStore from '../../store/userStore/index'
  import { addUserType } from '../../store/userStore/types'

  const formRef: any = ref(null)
  const showOuter = ref(false)
  const message = useMessage()
  const formValue = ref({
    user: {
      realName: '',
      phone: '',
      userLevel: null
    }
  })
  const user = ref({
    userName: '',
    password: '',
    realName: '',
    age: null,
    sex: null,
    birthDay: null,
    userLevel: null,
    phone: ''
  })
  const useuserStore = userStore()
  let tableData = ref()
  const sex = ref(null)
  const handleValidateClick = () => {
    useuserStore.getUserList(formValue.value.user).then(({ data }) => {
      tableData.value = data
      pagination.itemCount = data.length
    })
  }
  //打开新增用户模态框
  const open = () => {
    showOuter.value = true
    console.log('新增用户')
  }
  //新增用户
  const addUser = () => {
    useuserStore.addUser(user.value).then(({ code, msg }) => {
      if (msg) {
        message.error('添加用户失败')
      } else {
        showOuter.value = false
        useuserStore.resetUserInfo()
      }
    })
  }
  //详情
  const details = (data: any) => {}
  //删除用户
  const remove = (id: number) => {
    useuserStore.deleteUserById(id).then(({ code }) => {
      if (code === 200) {
        message.success('删除成功')
        handleValidateClick()
      }
    })
  }
  const pagination = reactive({
    page: 1,
    pageCount: 1,
    itemCount: 0,
    pageSize: 15,
    pageSizes: [15, 50, 100],
    showSizePicker: true,
    prefix: () => {
      return `共 ${pagination.itemCount} 条数据`
    },
    onChange: (page: number) => {
      pagination.page = page
      handleValidateClick()
    },
    onUpdatePageSize: (pageSize: number) => {
      pagination.pageSize = pageSize
      pagination.page = 1
      handleValidateClick()
    }
  })

  onMounted(() => {})

  const columns: DataTableProps['columns'] = [
    { key: 'id', title: 'id', align: 'center' },
    { key: 'userName', title: '姓名', align: 'center' },
    { key: 'realName', title: '真实姓名', align: 'center' },
    {
      key: 'age',
      title: '年龄',
      align: 'center'
    },
    {
      key: 'sex',
      title: '性别',
      align: 'center',
      render: (data: any) => {
        return data.sex === 1 ? '男' : '女'
      }
    },
    { key: 'birthDay', title: '出生日期', align: 'center' },
    { key: 'userLevel', title: '年级', align: 'center' },
    { key: 'phone', title: '手机号', align: 'center' },
    {
      key: 'imagePath',
      title: '头像',
      align: 'center',
      render(data: any) {
        return h(NAvatar, {
          size: 48,
          src: 'data:image/png;base64,' + data.imagePath
        })
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (data) => {
        return h('div', { class: 'flex' }, [
          h(
            NButton,
            {
              size: 'small',
              color: '#01a3a4',
              class: 'bg-[#00d2d3] mx-1',
              onClick: () => details(data)
            },
            { default: () => '详情' }
          ),
          h(
            NButton,
            {
              size: 'small',
              color: '#d63031',
              class: 'bg-[#ff7675] mx-1',
              onClick: () => remove(data.id as number)
            },
            { default: () => '删除' }
          )
        ])
      }
    }
  ]
  const generalOptions = [
    {
      label: '一年级',
      value: 1
    },
    {
      label: '二年级',
      value: 2
    },
    {
      label: '三年级',
      value: 3
    },
    {
      label: '四年级',
      value: 4
    },
    {
      label: '五年级',
      value: 5
    },
    {
      label: '六年级',
      value: 6
    },
    {
      label: '初一',
      value: 7
    },
    {
      label: '初二',
      value: 8
    },
    {
      label: '初三',
      value: 9
    },
    {
      label: '高一',
      value: 10
    },
    {
      label: '高二',
      value: 11
    },
    {
      label: '高三',
      value: 12
    }
  ]
  const gender = [
    {
      value: 1,
      label: '男'
    },
    {
      value: 2,
      label: '女'
    }
  ]
</script>
<style lang="scss" scoped>
  .box {
    color: #60d659;
  }
  .btn {
    width: 200px;
    align-self: auto;
    margin-left: 130px;
    margin-top: 50px;
  }
</style>
